// @ts-nocheck
import {useEffect} from 'react'

import {Modal, Form, Input, message} from 'antd'
import {createDistrict, modifyDistrict} from '@/services/district'


const Index = (props) => {
  const [form] = Form.useForm()
  const {visible, onClose, onOk, mode, data} = props
  useEffect(() => {
    if (visible) {
      if (mode === 'modify') {
        form.setFieldsValue({
          name: data.name,
          city: data.city
        })
      }
    }
  }, [visible])
  const handleOk = () => {
    form.validateFields().then(values => {
      if (mode === 'create') {
        createDistrict(values).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error('新建失败！').then()
          }
        })

      } else {
        modifyDistrict({...values, district_id: data.district_id}).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error('修改失败！').then()
          }
        })
      }
      form.resetFields()
    })
  }
  return (
    <Modal
      title={mode === 'create' ? '新建区域' : '修改区域'}
      maskClosable={false}
      destroyOnClose
      width={'20vw'}
      visible={visible}
      onCancel={()=> {form.resetFields();onClose()}}
      onOk={handleOk}
    >
      <Form
        form={form}
        labelCol={{span: 6}}
        wrapperCol={{span: 16}}
        autoComplete="off"
      >
        <Form.Item
          label="区域名称"
          name="name"
          rules={[{required: true, message: '请输入区域名称！'}]}
        >
          <Input placeholder={'例：浑南区'}/>
        </Form.Item>

        <Form.Item
          label="所属城市"
          name="city"
          rules={[{required: true, message: '请输入所属城市！'}]}
        >
          <Input placeholder={'例：沈阳市'}/>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Index;
